<template>
  <div class="service-config">
    <div class="config-header">
      <div class="left">
					<span class="name" @click.stop="back">返回</span>
				</div>
				<div class="center">
					<div class="tabs-item" :class="activeType === 'base' ? 'is-active main-color' : ''" @click.stop="changeAcitve('base')">
						基本信息
					</div>
					<div class="tabs-item" :class="activeType === 'fields' ? 'is-active main-color' : ''" @click.stop="changeAcitve('fields')">
						表单设计
					</div>
					<div class="tabs-item" :class="activeType === 'workflow' ? 'is-active main-color' : ''" @click.stop="changeAcitve('workflow')">
						流程设计
					</div>
					<div class="tabs-item" :class="activeType === 'extendConfig' ? 'is-active main-color' : ''" @click.stop="changeAcitve('extendConfig')">
						扩展设置
					</div>
				</div>
				<div class="right" v-if="activeType !== 'extendConfig'">
					<el-button size="small" type="primary" @click="saveForm">发布</el-button>
				</div>
    </div>
    <router-view ref="currentRoute"></router-view>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { busConfigStore } from './store/busConfigStore'
@Component({
  name: 'serviceConfig',
  components: {
  }
})
export default class extends Vue {
  [x: string]: any;
  private activeType = 'base'
  private back () {
    this.changePage()
  }

  private changePage (acitve?: string | undefined) {
    console.log(busConfigStore)
    const { workflowChange, baseChange, fieldsChange } = busConfigStore
    if (workflowChange || baseChange || fieldsChange) {
      this.$confirm('表格设置已变更，确定不保存退出吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.jumpRouter(acitve)
      }).catch(() => {
        // this.jumpRouter(acitve)
      })
    } else {
      this.jumpRouter(acitve)
    }
  }

  private jumpRouter (acitve?: string | undefined) {
    busConfigStore.baseChange = false;
    busConfigStore.fieldsChange = false;
    busConfigStore.workflowChange = false;
    if (acitve) {
      this.activeType = acitve;
      this.$router.push({
        path: `/customer_template_setting/${this.$route.params.businessId}/${this.activeType}`
      });
    } else {
      this.$router.push('/setting_center/index/customer_template_setting/busSetting')
    }
  }

  private saveForm () {
    const current = this.$refs.currentRoute as any;
    console.log(current)
    current.save();
  }

  private changeAcitve (active: string) {
    this.changePage(active)
  }

  private beforeRouteEnter (to: any, from: any, next: any) {
    next((vm: any) => {
      vm.activeType = 'base'
      vm.jumpRouter('base')
    })
  }

  private mounted () {
    const path = this.$route.path.split('/');
    if (path[path.length - 1]) {
      this.activeType = path[path.length - 1];
    }
  }
}
</script>
<style lang="stylus" scoped>
.service-config {
  height 100%
  border: 1px solid #ecf0f3;
  box-shadow: 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0;
  padding: 0;
  border-radius: 10px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  margin: 0 2px 2px 0;
  position: relative;
  /deep/.bjs-powered-by {
    display none
  }
}
.config-header {
  background-color: #fff;
  position: relative;
  z-index: 10;
  height: 56px;
  display: flex;
  align-items: center;
  color: rgba(0,0,0,0.8);
  justify-content: space-between;
  padding: 0px 24px;
  margin: 0px;
  max-width: 100%;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 8px;
  .left {
    color: rgba(0,0,0,0.8);
    font-size: 20px;
    .name {
      cursor pointer
    }
  }
  .center {
    flex-grow: 1;
    padding-left: 40px;
    color: #262626;
    font-size: 16px;
    text-align: center
    .tabs-item {
      display: inline-block;
      cursor: pointer;
      margin-right: 40px;
      font-weight: 500;
      padding: 0px;
    }
    .tabs-item.is-active {
      border-bottom: 2px solid;
      border-bottom-width: 2px;
      line-height: 52px;
      color: #1890ff;
    }
  }
}
</style>
